<template>
    <div>
        <div class="selected px-3 w-50 d-flex justify-content-start align-items-center" v-if="current?.value">
            <i class="fs-5 me-3 text-success fw-bold" :class="current?.value"></i>
            <i class="iconfont te-i-close fs-6 close" @click="updateIcon({})"></i>
        </div>
        <hr />
        <div class=" w-100 overflow-y-auto overflow-x-hidden" style="height: 200px;">
            <a v-for=" icon in $attrs.options" :key="icon" class="icon-item text-center no-underline text-success"
                :class="{ active: icon.value == current?.value }" @click="updateIcon(icon)">
                <i :class="icon.value"></i>
            </a>
        </div>

    </div>
</template>

<script setup>
import { defineEmits, useAttrs, ref, watch } from 'vue';
let attrs = useAttrs();
const emit = defineEmits(['change']);
const current = ref({})
console.log("attrs", attrs)
current.value = { value: attrs.meta.pdata.icon }
watch(() => attrs.meta.pdata.icon, (val) => {
    current.value = { value: val }
})



const updateIcon = (icon) => {
    current.value = icon;
    emit('change', icon.value)
}
</script>


<style scoped>
.icon-item {
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px;
}

.icon-item:hover,
.active {
    background-color: azure;
    font-weight: 800;
    border: 1px solid hsl(0, 93%, 59%);


}

.close {
    font-size: 0.7rem !important;
    font-weight: 600;

}

.close:hover {
    opacity: 0.6;
}
</style>